<template>
  <!-- <link
    rel="stylesheet"
    ref="homeStyle"
    href="/src/views/subjects/english/pages/home/home1.css"
  /> -->

  <div class="english-home">
    <!-- 测试用顶部栏后面需要删除 -->
    <!-- <div class="test-top"> -->
    <!-- <img src="/src/assets/images/english-home-img/模拟导航栏.png" alt="" /> -->
    <!-- </div> -->
    <!-- 顶部栏 -->
    <header class="top-header">
      <!-- 切换样式按钮 -->
      <label class="switch">
        <!-- <input type="checkbox" @click="cssChange" /> -->
        <input type="checkbox" @click="themeStore.switchTheme()" />
        <span class="slider round"></span>
      </label>

      <div class="abc-logo">
        <div>ABC</div>
        <router-link to="#">
          <img :src="imagePath" />
        </router-link>
      </div>

      <button class="setting-btn"></button>
    </header>
    <!-- 标题及功能按钮区域 -->
    <section class="title-section">
      <h1 class="main-title">WOED RETENTION</h1>
      <p class="sub-title">学 英 语就 找 ai 学 习 辅 导</p>
      <div class="function-btns">
        <router-link class="btn" to="#" target="_blank">
          <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
          <div>背单词</div>
        </router-link>
        <router-link class="btn" to="#" target="_blank">
          <img
            src="/src/assets/images/english-home-img/文档架子1_document-folder.png"
            alt=""
          />
          <div>阅读练习</div>
        </router-link>
        <router-link class="btn" to="#" target="_blank">
          <img src="/src/assets/images/english-home-img/编辑1_editor.png" alt="" />
          <div>写作文</div>
        </router-link>
      </div>
      <div class="function-btns-bottom">
        <a href="#last">
          <img
            src="/src/assets/images/english-home-img/圆形双下箭头1_circle-double-down.png"
            alt=""
          />
        </a>
      </div>
    </section>
    <!-- 热门词汇本区域 -->
    <section class="vocab-section">
      <span class="hot-tag">热门词汇本</span>
      <div class="vocab-cards">
        <div class="card">
          <div class="in-card">
            <router-link to="#" target="_blank">
              <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
            </router-link>
          </div>
          <div class="card-title">初中英语词汇本</div>
        </div>
        <div class="card">
          <div class="in-card">
            <router-link to="#" target="_blank">
              <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
            </router-link>
          </div>
          <div class="card-title">高中英语词汇本</div>
        </div>
        <div class="card">
          <div class="in-card">
            <router-link to="#" target="_blank">
              <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
            </router-link>
          </div>
          <div class="card-title">四级英语词汇本</div>
        </div>
        <div class="card">
          <div class="in-card">
            <router-link to="#" target="_blank">
              <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
            </router-link>
          </div>
          <div class="card-title">专业四级词汇本</div>
        </div>
        <div class="card">
          <div class="in-card">
            <router-link to="#" target="_blank">
              <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
            </router-link>
          </div>
          <div class="card-title">英语六级词汇本</div>
        </div>
        <div class="card">
          <div class="in-card">
            <router-link to="#" target="_blank">
              <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
            </router-link>
          </div>
          <div class="card-title">专业六级词汇本</div>
        </div>
        <div class="card">
          <div class="in-card">
            <router-link to="#" target="_blank">
              <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
            </router-link>
          </div>
          <div class="card-title">专业八级词汇本</div>
        </div>
        <div class="card">
          <div class="in-card-1">
            <router-link to="#" target="_blank">
              <img
                src="/src/assets/images/english-home-img/加号1_plus-cross.png"
                alt=""
              />
            </router-link>
          </div>
          <div class="card-title">更多单词本</div>
        </div>
      </div>
    </section>
    <!-- 自定义学习计划区域 -->
    <section class="plan-section">
      <div class="chart">
        <div class="chart-img">
          <div ref="chart" style="width: 600px; height: 400px"></div>
        </div>
      </div>
      <div class="plan-desc">
        <h2 class="plan-title">自定义我的学习计划</h2>
        <p class="plan-subtitle">只要现在开始追赶，就已经走在胜利的路上！</p>
        <div class="plan-desc-btn">
          <img :src="telegramImagePath" />
          <router-link class="plan-btn" to="#" target="_blank">GO</router-link>
        </div>
      </div>

      <div class="plan-last" id="last">ai辅助学习系统</div>
    </section>
  </div>
</template>

<script type="module" src="./home.js"></script>

<style lang="scss" scoped>
@use "./home-light-theme.scss";
@use "./home-dark-theme.scss";
</style>
